<template>
  <div class="phone-verify">
    <!-- 左半部分：新增单独复制按钮 + Toast 提示 -->
    <div class="left">
<!--      <h3 class="verify-title">手机号所有权验证</h3>-->
      <p class="main-tip">为了确保该手机号为你所有，请完成以下验证步骤。</p>

      <div class="verify-step">
        <span class="step-key">请使用 <strong>手机浏览器扫码</strong></span>
        <span class="step-hint">（扫码后将自动跳转短信应用，直接发送即可）</span>
      </div>

      <div class="sim-reminder">
        <span class="reminder-hint">友情提示：</span>
        <span class="reminder-key">若你有多张电话卡，请确保用以下卡号发送：<strong>{{ preferredSim }}</strong></span>
      </div>

      <!-- 手动操作区：新增短信内容/号码单独复制按钮 -->
      <div class="manual-section">
        <h4 class="section-title">若扫码无法激活短信应用，可手动操作</h4>
        <div class="manual-content">
          <p class="content-hint">请编辑短信，内容如下：</p>
          <!-- 短信内容：新增单独复制按钮 -->
          <div class="sms-item">
            <span class="sms-code">{{ messageText }}</span>
            <button class="single-copy-btn" @click="copySingleText(messageText, '短信内容')">
              <i class="icon-copy-small" /> 复制
            </button>
          </div>

          <p class="content-hint">发送到以下手机号：</p>
          <!-- 短信号码：新增单独复制按钮 -->
          <div class="sms-item">
            <span class="sms-number">{{ smsNumber }}</span>
            <button class="single-copy-btn" @click="copySingleText(smsNumber, '接收号码')">
              <i class="icon-copy-small" /> 复制
            </button>
          </div>
        </div>
      </div>

      <p class="after-verify">短信发送成功后，你可以直接关闭此页面，验证将自动完成。<span style="color: #d19292">如果该弹窗反复弹出，请联系客服！</span></p>

      <div class="actions">
        <a :href="smsUri" class="open-sms" @click.prevent="openSms">
          <i class="icon-sms" /> 打开短信应用并自动填写
        </a>
        <button class="copy-btn" @click="copyAllText">
          <i class="icon-copy" /> 复制全部信息
        </button>
      </div>
    </div>

    <!-- 右半部分：新增二维码加载动效 -->
    <div class="right">
      <!-- 加载中动效（二维码未生成时显示） -->
      <div v-if="!qrReady && !qrDataUrl" class="qr-loading">
        <div class="loading-spinner" />
        <p class="loading-text">二维码生成中...</p>
      </div>
      <!-- 二维码（生成成功后显示） -->
      <img
        v-else-if="qrDataUrl && showImgFallback"
        :src="qrDataUrl"
        alt="二维码 - 扫码发送短信"
        class="qr-img"
      >
      <!-- 二维码加载失败提示 -->
      <div v-else-if="qrReady === false" class="qr-error">
        <i class="icon-error" />
        <p class="error-text">二维码生成失败，请使用手动操作</p>
      </div>

      <p class="wave-text">
        <span v-for="(char, i) in '使用手机浏览器扫描'.split('')" :key="i" :style="{animationDelay: (i * 0.15)+'s'}">
          {{ char }}
        </span>
      </p>
      <p class="qr-hint">扫码即可在默认短信应用中生成短信并填写收件人与内容。</p>
    </div>

    <!-- Toast 提示组件（替代 alert） -->
    <div class="toast" :class="{ 'toast-show': showToast }">
      <i class="toast-icon" :class="toastType === 'success' ? 'icon-success' : 'icon-warning'" />
      <span class="toast-text">{{ toastMessage }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneVerify',
  props: {
    preferredSim: { type: String, default: 'xxxx' },
    smsNumber: { type: String, default: '15528052586' },
    messageText: { type: String, default: '手机号验证' }
  },
  data() {
    return {
      qrDataUrl: null,
      qrReady: false,
      showImgFallback: false,
      showToast: false, // Toast 显示状态
      toastMessage: '', // Toast 内容
      toastType: 'success' // Toast 类型：success/warning
    }
  },
  computed: {
    smsUri() {
      return `sms:${this.smsNumber}?body=${encodeURIComponent(this.messageText)}`
    }
  },
  mounted() {
    this.generateQrCode()
  },
  methods: {
    // 生成二维码（新增加载状态管理）
    generateQrCode() {
      const uri = this.smsUri
      import('qrcode')
        .then(module => {
          const QRCode = module.default || module
          return QRCode.toDataURL(uri, { width: 180, margin: 1 }) // 增加margin，避免二维码边缘过挤
        })
        .then(dataUrl => {
          this.qrDataUrl = dataUrl
          this.showImgFallback = true
          this.qrReady = true
        })
        .catch(() => {
          this.qrReady = false
          this.showToastMessage('二维码生成失败，请使用手动操作', 'warning') // 失败提示
        })
    },
    // 打开短信应用
    openSms() {
      window.location.href = this.smsUri
    },
    // 复制全部信息（原功能，替换为Toast提示）
    copyAllText() {
      const text = `收件人：${this.smsNumber}\n内容：${this.messageText}`
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text)
          .then(() => this.showToastMessage('全部信息已复制到剪贴板'))
          .catch(() => this.fallbackCopy(text, '全部信息'))
      } else {
        this.fallbackCopy(text, '全部信息')
      }
    },
    // 单独复制短信内容/号码（新增功能）
    copySingleText(content, type) {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(content)
          .then(() => this.showToastMessage(`${type}已复制到剪贴板`))
          .catch(() => this.fallbackCopy(content, type))
      } else {
        this.fallbackCopy(content, type)
      }
    },
    // 降级复制方案（替换为Toast提示）
    fallbackCopy(text, type) {
      const ta = document.createElement('textarea')
      ta.value = text
      ta.style.position = 'fixed' // 避免页面滚动影响
      document.body.appendChild(ta)
      ta.select()
      try {
        document.execCommand('copy')
        this.showToastMessage(`${type}已复制到剪贴板`)
      } catch (e) {
        this.showToastMessage(`复制失败，请手动复制：${text}`, 'warning')
      }
      document.body.removeChild(ta)
    },
    // 显示Toast提示（核心新增方法）
    showToastMessage(message, type = 'success') {
      this.toastMessage = message
      this.toastType = type
      this.showToast = true
      // 3秒后自动隐藏
      setTimeout(() => {
        this.showToast = false
      }, 3000)
    },
    // 二维码加载完成后执行（加个淡入效果）
    handleQrLoad(e) {
      if (!e || !e.target) return;

      // 先短暂隐藏再淡入，保持动画效果但避免初始不可见问题
      e.target.style.opacity = 0;
      setTimeout(() => {
        if (e.target) {
          e.target.style.opacity = 1;
        }
      }, 50);
    }
  }
}
</script>

<style scoped>
.phone-verify {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 左半部分样式 */
.left {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verify-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.3;
}

.main-tip {
  margin: 0;
  font-size: 16px;
  color: #4a5568;
  line-height: 1.5;
}

.verify-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.step-key {
  color: #2d3748;
  font-weight: 500;
}

.step-hint {
  font-size: 13px;
  color: #718096;
}

.sim-reminder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background-color: #f7fafc;
  border-radius: 8px;
  font-size: 14px;
}

.reminder-hint {
  color: #718096;
}

.reminder-key {
  color: #2d3748;
  font-weight: 500;
}

.reminder-key strong {
  color: #2b6cb0;
}

/* 手动操作区：新增sms-item布局（内容+单独复制按钮） */
.manual-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background-color: #edf2f7;
  border-radius: 8px;
}

.section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3748;
}

.manual-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 4px;
}

.content-hint {
  margin: 0;
  font-size: 13px;
  color: #718096;
  line-height: 1.4;
}

/* 短信内容/号码容器：flex布局，按钮靠右 */
.sms-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.sms-code {
  font-size: 14px;
  color: #2d3748;
  font-family: monospace;
}

.sms-number {
  font-size: 14px;
  color: #2b6cb0;
  font-weight: 500;
}

/* 单独复制按钮：小号样式，避免喧宾夺主 */
.single-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background-color: #f7fafc;
  color: #4a5568;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.single-copy-btn:hover {
  background-color: #edf2f7;
  border-color: #cbd5e0;
}

.icon-copy-small::before {
  content: "📋";
  font-size: 12px;
}

/* 底部操作按钮 */
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.open-sms {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background-color: #3182ce;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.open-sms:hover {
  background-color: #2b6cb0;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #2d3748;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  border-color: #cbd5e0;
  background-color: #f7fafc;
}

.icon-sms::before {
  content: "📱";
  font-size: 15px;
}

.icon-copy::before {
  content: "📋";
  font-size: 15px;
}

.after-verify {
  margin: 0;
  font-size: 12px;
  color: #a0aec0;
  line-height: 1.4;
}

/* 右半部分：新增加载/失败状态样式 */
.right {
  width: 220px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* 二维码加载动效 */
.qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #ffffff;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #edf2f7;
  border-top-color: #3182ce;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 8px;
  font-size: 12px;
  color: #718096;
}

/* 二维码加载失败样式 */
.qr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  background-color: #fff5f5;
}

.icon-error::before {
  content: "❌";
  font-size: 24px;
  color: #e53e3e;
}

.error-text {
  margin-top: 8px;
  font-size: 12px;
  color: #e53e3e;
  padding: 0 8px;
  line-height: 1.4;
}

/* 二维码图片样式 */
/* 修改二维码图片样式 */
.qr-img {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qr-hint {
  font-size: 12px;
  color: #718096;
  margin: 0;
  line-height: 1.4;
}

.wave-text {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  gap: 2px;
  color: #2d3748;
  margin: 8px 0;
}

.wave-text span {
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Toast 提示样式（替代alert） */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -100px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.toast-show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast-icon {
  font-size: 16px;
}

.icon-success::before {
  content: "✓";
  color: #38a169;
}

.icon-warning::before {
  content: "!";
  color: #ecc94b;
}

.toast-text {
  font-size: 14px;
  color: #2d3748;
}

/* 响应式适配 */
/*
@media (max-width: 768px) {
  .phone-verify {
    flex-direction: column;
    gap: 24px;
  }

  .right {
    width: 100%;
    align-items: center;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .open-sms, .copy-btn {
    justify-content: center;
    width: 100%;
  }
}
*/

/* 加载动画关键帧 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
